<template>
    <div>
        <div class="top"></div>
        <div class="nav">
            <span v-for="(v,i) in datalist" :key="i" @click="fn(i)" :class="actiove == i ?'Active' : '' ">{{v.tit}}</span>
            
            <span class="iconfont icon-fangdajing sp1"></span> 
            
            
        </div>
            <component :is ="com"></component>
        <!-- <router-view></router-view> -->
        <div class="cont"></div>
         <BottomBar/> 
    </div>
</template>

<script>
import BottomBar from "../components/bottomBar.vue"
import Haofang from "@/views/kandian2/haofang.vue"
import Faxian from "@/views/kandian2/faxian.vue"
import Hangqing from "@/views/kandian2/hangqing.vue"
import Caipan from "@/views/kandian2/caipan.vue"
import Baike from "@/views/kandian2/baike.vue"
export default {
     components:{
        BottomBar
    },
    data(){
        return{
            datalist:[
                {tit:"好房"},
                {tit:"发现"},
                {tit:"行情"},
                {tit:"踩盘"},
                {tit:"百科"},
            ],
            com:Haofang,
            actiove:0
        }
    },
    methods:{
        fn(i){
            if(i===0){this.com=Haofang}
            if(i===1){this.com=Faxian}
            if(i===2){this.com=Hangqing}
            if(i===3){this.com=Caipan}
            if(i===4){this.com=Baike}
            this.actiove=i
        }
    }
}
</script>

<style scoped>
    /* .top{
        height:0.2rem;
        width:100%;
    } */
    .nav{
        display:flex; 
        justify-content:space-around;
        flex-wrap:wrap;
        position:fixed;
        top:0rem; 
        padding-top:20px;
        width:100%;
        height:54px;
        background-color:#fff;
        z-index:10;
    }
   
     span{
        display:inline-block;
         font-size:14px;
        font-weight:500;
        color:#000;
        padding:4px;
    }
     .Active{
        font-size:20px;
        font-weight:900;
        padding-top:0px;
        border-bottom:2px solid #005ce8;
    }
    .cont{
        flex:1;
    }
</style>